<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台用户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>Future book</title>
</head>
<!-- 作为公共部分分离 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<link rel="stylesheet" href="../../resources/css/header.css" th:href="@{/resources/css/header.css}">
<link rel="stylesheet" href="../../resources/css/cut.css" th:href="@{/resources/css/cut.css}">
<link rel="stylesheet" href="../../resources/font/iconfont.css" th:href="@{/resources/font/iconfont.css}">
<!-- 作为公共部分分离/ -->
<link rel="stylesheet" href="../../resources/css/backstage-book.css" th:href="@{/resources/css/backstage-book.css}">
<body>
    <!-- 作为公共部分分离 -->
        <div class="shortcut">
            <div class="w">
                <!-- <ul class="fl"><a href="javascript:">future book</a></ul> -->
                <ul class="fl left" >
                    <li class="fl" id="pngfix"><a href="javascript:"><i class="iconfont icon-cebianlanshousuo"></i></a></li>
                    <li class="fl"><a href="FutureNovel.html" th:href="@{/index}"><i class="iconfont icon-earth"></i></a></li>
                </ul>
                <ul class="fr" th:each="user:${session.currentAccount}">
                    <li class="message fl"><i class="iconfont icon-Message"></i></li>
                    <li class="skin fl"><i class="iconfont icon-ColorLens"></i></li>
                    <li class="s-name fl"></li>
                    <li class="admin fl" id="admin"><span th:text="${user.userName}"></span><i class="iconfont icon-downarrow"></i>
                        <ul class="dropdown" id="dropdown" style="display: none;">
                            <li><a th:href="${#request.contextPath}+'/user/'+${session.currentAccount.uid.toString()}">个人信息</a></li>
                            <li><a href="login.html" th:href="@{/login}">切换账号</a></li>
                            <li onclick="yes_no('确认退出吗','logout_user')"><a href="javascript:" id="out" >退出</a></li>
                        </ul>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="catalog" id="catalog">
        <div class="side fl">
            <div class="logo">
                <span>未来小说网</span>
            </div>
            <ul>
                <li><a href="backstage-book.html" th:href="@{/admin/books}">书籍管理</a></li>
                <li class="active"><a href="backstage-user.html" th:href="@{/admin/users}">用户管理</a></li>
                <li><a href="backstage-comment.html" th:href="@{/admin/comments}">评论管理</a></li>
                <li><a href="backstage-poster.html" th:href="@{/admin/posters}">海报管理</a></li>
    
            </ul>
        </div>
        </div>
    <!-- 作为公共部分分离/ -->
        <div class="contant" id="contant">
            <div class="book">
                <div class="function">
                    <span>手机号</span> <input type="text" class="seek" id="seek_phone" placeholder="请输入">
                    
                    <button type="button" class="btn-seek" onclick="seek()"><i class="iconfont icon-iconseach"></i></button>
                </div>
                <div class="function">
                    <button type="button" class="btn-add" onclick="popup_user_add()">添加</button>
                    <button type="button" class="btn-del" onclick="yes_no('确认删除吗？','user_del')">删除</button>
                </div>
                <table class="data_dispaly">
                    <thead>
                        <tr>
                            <th style="width: 4%;"><input type="checkbox" id="all-check" name="all-check"  value="del" style="zoom: 1.5;"></th>
                            <th style="width: 13%;">用户名</th>
                            <th style="width: 5%;">头像</th>
                            <th style="width: 20%;">手机号</th>
                            <th style="width: 4%;">积分</th>
                            <th style="width: 13%;">身份</th>
                            <th style="width: 15%;">上次登录时间</th>
                            <th style="width: 13%;">账号状态</th>
                            <th style="width: 19%;">操作</th>
                        </tr>
                    </thead>
                    <tbody class="tbody" id="a">
                        
                    </tbody>
                </table>
                <span id="control_page">
                    
                </span>
                <span id="control_onepage">
                    <select name="status" class="item" id="change_item_user" onchange="change_page_user()" >
                    <option value="10" selected>10条/页</option>
                    <option value="20" >20条/页</option>
                    <option value="50" >50条/页</option>
                    </select>
                </span>
                <div class="but">
                    
                    <button type="button" class="btn" id="gopre">上一页</button>
                    <input type="text" class="go" id="go" style="border: 1px solid #BBBBBB; width: 25px; height: 27px; padding-left: 0;">
                    <button type="button" class="btn" id="gogogo">go</button>
                    <button type="button" class="btn" id="gonext">下一页</button>
                </div>
            </div>
        </div>
    </body>
<script th:inline="javascript" async>
    const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
    var curPage=1,
        onepage=$('#change_item_user').find('option:selected').val();
    $(document).ready(function(){
        
        //转换部分返回值为中文
        function permission(permission){
            if(permission=='USER'){
                return '用户'
            }else if(permission=='ADMIN'){
                return '管理员'
            }else{
                return '作者'
            }
        }
        function lastLoginDate(lastLoginDate){
            
            if(lastLoginDate==null){
                return '从未登录'
            }else{
                return lastLoginDate
            }
        }
        function status(status){
            if(status=='FINE'){
                return '正常'
            }else if(status=='UNVERIFIED'){
                return '未验证'
            }else{
                return '已封禁'
            }
        }
       
        // function profileImgUrl(url){
        //     $(this).append('<img src=\''+url+'\'>')
        // }
        $.ajax({
                url:contextPath+"/api/admin/accounts/pages" ,
                type:'GET',
                data:{
                    per_page: Number(onepage)
                },

                success: function(data){
                    const allPage=data.pages;
                    console.log(data)
                    $.ajax({
                        url:contextPath+"/api/admin/accounts/get" ,
                        type:'GET',
                        data:{
                            per_page: Number(onepage),
                            page: Number(curPage)
                        },
                        success: function(data){
                            $('#a').empty();
                            $.each(data,function(i){
                                        $('#a').append(`<tr>
                                        <th style="width: 4%;"><input type="checkbox" class="check" name="check"  value="${data[i].uid}" style="zoom: 1.5;"></th>
                                        <th style="width: 13%;">${data[i].userName}</th>
                                        <th style="width: 5%;"><img src="${data[i].profileImgUrl}" onerror="this.src='../../future-novel/resources/img/avatar.png';onerror=null"></img></th>
                                        <th style="width: 20%;" class="user_phone";>${data[i].phone}</th>
                                        <th style="width: 4%;" class="user_exper";>${data[i].experience}</th>
                                        <th style="width: 13%;" class="user_per">${permission(data[i].permission)}</th>
                                        <th style="width: 15%;">${lastLoginDate(data[i].lastLoginDate)}</th>
                                        <th style="width: 13%;">${status(data[i].status)}</th>
                                        <th style="width: 19%;"><span class="modify-user" onclick="popup_user('${data[i].uid}','${data[i].userName}','${data[i].phone}','${data[i].experience}')"><i class="iconfont icon-xiugai"> 编辑</i></span></th>
                                    </tr>`)
                                    })

                            $('#control_page').prepend('第'+curPage+'页/共'+allPage+'页')
                            console.log(data)
                        },
                        error: function(jqXHR) {
                            let mes = JSON.parse(jqXHR.responseText);
                            popup_over('icon-sad','#d81e06',mes.errorMessage);
                        }
                    })
                    $('#gonext').on('click',function(){
                        if(curPage>=1 && curPage<allPage){
                            curPage=Number(curPage)+1;
                        }
                        console.log(curPage)
                        $.ajax({
                        url:contextPath+"/api/admin/accounts/get" ,
                        type:'GET',
                        data:{
                            per_page: Number(onepage),
                            page: Number(curPage)
                        },
                        success: function(data){
                            $('#a').empty();
                            $.each(data,function(i){
                                        $('#a').append(`<tr>
                                        <th style="width: 4%;"><input type="checkbox" class="check" name="check"  value="${data[i].uid}" style="zoom: 1.5;"></th>
                                        <th style="width: 13%;">${data[i].userName}</th>
                                        <th style="width: 5%;"><img src="${data[i].profileImgUrl}" onerror="this.src='../../future-novel/resources/img/avatar.png';onerror=null"></img></th>
                                        <th style="width: 20%;" class="user_phone";>${data[i].phone}</th>
                                        <th style="width: 4%;">${data[i].experience}</th>
                                        <th style="width: 13%;" class="user_per">${permission(data[i].permission)}</th>
                                        <th style="width: 15%;">${lastLoginDate(data[i].lastLoginDate)}</th>
                                        <th style="width: 13%;">${status(data[i].status)}</th>
                                        <th style="width: 19%;"><span class="modify-user" onclick="popup_user('${data[i].uid}','${data[i].userName}','${data[i].phone}','${data[i].experience}')"><i class="iconfont icon-xiugai"> 编辑</i></span></th>
                                    </tr>`)
                                    })
                                    $('#control_page').empty()        
                            $('#control_page').prepend('第'+curPage+'页/共'+allPage+'页')
                            console.log(data)
                        },
                        error: function(jqXHR) {
                            let mes = JSON.parse(jqXHR.responseText);
                            popup_over('icon-sad','#d81e06',mes.errorMessage);
                        }
                    })
                    })
                    $('#gopre').on('click',function(){
                        if(curPage>1 && curPage<=allPage){
                            curPage=Number(curPage)-1;
                        }
                        console.log(curPage)
                        $.ajax({
                        url:contextPath+"/api/admin/accounts/get" ,
                        type:'GET',
                        data:{
                            per_page: Number(onepage),
                            page: Number(curPage)
                        },
                        success: function(data){
                            $('#a').empty();
                            $.each(data,function(i){
                                        $('#a').append(`<tr>
                                        <th style="width: 4%;"><input type="checkbox" class="check" name="check"  value="${data[i].uid}" style="zoom: 1.5;"></th>
                                        <th style="width: 13%;">${data[i].userName}</th>
                                        <th style="width: 5%;"><img src="${data[i].profileImgUrl}" onerror="this.src='../../future-novel/resources/img/avatar.png';onerror=null"></img></th>
                                        <th style="width: 20%;" class="user_phone";>${data[i].phone}</th>
                                        <th style="width: 4%;">${data[i].experience}</th>
                                        <th style="width: 13%;" class="user_per">${permission(data[i].permission)}</th>
                                        <th style="width: 15%;">${lastLoginDate(data[i].lastLoginDate)}</th>
                                        <th style="width: 13%;">${status(data[i].status)}</th>
                                        <th style="width: 19%;"><span class="modify-user" onclick="popup_user('${data[i].uid}','${data[i].userName}','${data[i].phone}','${data[i].experience}')"><i class="iconfont icon-xiugai"> 编辑</i></span></th>
                                    </tr>`)
                                    })
                                    $('#control_page').empty()
                            $('#control_page').prepend('第'+curPage+'页/共'+allPage+'页')
                            console.log(data)
                        },
                        error: function(jqXHR) {
                            let mes = JSON.parse(jqXHR.responseText);
                            popup_over('icon-sad','#d81e06',mes.errorMessage);
                        }
                    })
                    })
                    $('#gogogo').on('click',function(){
                    if($('#go').val()>=1 && $('#go').val()<=allPage){
                    curPage=$('#go').val();
                    $.ajax({
                        url:contextPath+"/api/admin/accounts/get" ,
                        type:'GET',
                        data:{
                            per_page: Number(onepage),
                            page: Number(curPage)
                        },
                        success: function(data){
                            $('#a').empty();
                            $.each(data,function(i){
                                        $('#a').append(`<tr>
                                        <th style="width: 4%;"><input type="checkbox" class="check" name="check"  value="${data[i].uid}" style="zoom: 1.5;"></th>
                                        <th style="width: 13%;">${data[i].userName}</th>
                                        <th style="width: 5%;"><img src="${data[i].profileImgUrl}" onerror="this.src='../../future-novel/resources/img/avatar.png';onerror=null"></img></th>
                                        <th style="width: 20%;" class="user_phone";>${data[i].phone}</th>
                                        <th style="width: 4%;">${data[i].experience}</th>
                                        <th style="width: 13%;" class="user_per">${permission(data[i].permission)}</th>
                                        <th style="width: 15%;">${lastLoginDate(data[i].lastLoginDate)}</th>
                                        <th style="width: 13%;">${status(data[i].status)}</th>
                                        <th style="width: 19%;"><span class="modify-user" onclick="popup_user('${data[i].uid}','${data[i].userName}','${data[i].phone}','${data[i].experience}')"><i class="iconfont icon-xiugai"> 编辑</i></span></th>
                                    </tr>`)
                                    })
                            $('#control_page').empty()
                            $('#control_page').prepend('第'+curPage+'页/共'+allPage+'页')
                            console.log(data)
                        },
                        error: function() {
                            //const data = JSON.parse(jqXHR.responseText);
                            popup_over('icon-sad','#d81e06',"请求失败");
                        }
                    })
                    }else{
                        popup_over('icon-sad','#d81e06',"不存在");
                    }
                    
                })
                },
                error: function(jqXHR) {
                    let data = JSON.parse(jqXHR.responseText);
                    popup_over('icon-sad','#d81e06',data.errorMessage);
                    console.log(data.errorMessage);
                }
            })
            
    })        
</script>
<!-- 作为公共部分分离 -->
<script src="../../resources/js/index.js" th:src="@{/resources/js/index.js}">
</script>
<script src="../../resources/js/index2.js" th:src="@{/resources/js/index2.js}">
</script>
<!-- 作为公共部分分离/ -->
</html>